<template>
  <view class="property-value-manage">
    <uni-nav-bar
      title="属性值管理"
     
    />
    
    <view class="header">
      <text class="property-name">{{ property.name }}</text>
      <text class="property-remark">{{ property.remark || '无备注' }}</text>
    </view>

    <uni-card>
      <uni-table border stripe emptyText="暂无属性值">
        <uni-tr>
          <uni-th width="60" align="center">ID</uni-th>
          <uni-th align="center">属性值</uni-th>
          <uni-th width="80" align="center">操作</uni-th>
        </uni-tr>
        <uni-tr v-for="item in propertyValues" :key="item.id">
          <uni-td align="center">{{ item.id }}</uni-td>
          <uni-td>{{ item.name }}</uni-td>
          <uni-td>
            <view class="action-buttons">
              <button class="mini-btn" type="primary" size="mini" @click="showValueForm(item)">编辑</button>
              <button class="mini-btn" type="warn" size="mini" @click="deleteValue(item.id)">删除</button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
      
      <button type="primary" class="add-btn" @click="showValueForm()">添加属性值</button>
    </uni-card>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { 
  getProperty,
  getPropertyValuePage,
  deletePropertyValue
} from '@/api/mall/product/property'
 

const property = ref({})
const propertyValues = ref([])
const valueFormData = ref({
  id: null,
  propertyId: null,
  name: '',
  remark: ''
})
const valueFormMode = ref('create')

const valueRules = {
  name: {
    rules: [{ required: true, errorMessage: '请输入属性值' }]
  }
}
onMounted(() => {
  uni.$on('refreshPropertyValues', (propertyId ) => {
  if (propertyId) {
    loadPropertyValues(propertyId.id)
  }
})
})

onUnmounted(() => {
  uni.$off('refreshPropertyValues', loadPropertyValues)
})
onLoad((options) => {
  if (options.id) {
    loadProperty(options.id)
    loadPropertyValues(options.id)
  }
})

const loadProperty = async (id) => {
  const res = await getProperty(id)
  property.value = res.data
}

const loadPropertyValues = async (propertyId) => {
  const res = await getPropertyValuePage({ 
    pageNo: 1, 
    pageSize: 100,
    propertyId
  })
  propertyValues.value = res.data.list
}

const showValueForm = (value = null) => {
  console.log('点击编辑按钮，value:', value)
  const mode = value ? 'update' : 'create'
  const params = {
    mode,
    propertyId: property.value.id
  }
  
  if (value) {
    params.id = value.id
    params.name = encodeURIComponent(value.name)
    params.remark = value.remark ? encodeURIComponent(value.remark) : ''
  }
  
  const url = `/pages/product/PropertyValueForm?${Object.entries(params)
    .map(([k, v]) => `${k}=${v}`)
    .join('&')}`
  
  console.log('跳转URL:', url)
  uni.navigateTo({
    url,
    fail: (err) => {
      console.error('跳转失败:', err)
      uni.showToast({
        title: '打开表单失败',
        icon: 'none'
      })
    }
  })
}

const deleteValue = async (id) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该属性值吗？',
    success: async (res) => {
      if (res.confirm) {
        await deletePropertyValue(id)
        await loadPropertyValues(property.value.id)
        uni.showToast({ title: '删除成功', icon: 'success' })
      }
    }
  })
}

const handleBack = () => {
  uni.navigateBack()
}
</script>

<style scoped>
.property-value-manage {
  padding: 15px;
}

.header {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.property-name {
  font-size: 16px;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.property-remark {
  font-size: 14px;
  color: #888;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.mini-btn {
  margin: 0;
  padding: 0 12px;
  font-size: 12px;
  min-width: 60px;
}

.add-btn {
  margin-top: 15px;
  width: 100%;
}
</style>